<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>大事件-后台登录页</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <!-- 引入bootstrap的css文件 -->
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
  <!-- 引入jq文件 -->
  <script src="./libs/jquery-1.12.4.min.js"></script>
  <!-- 引入bootstrap的js文件 -->
  <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="main_wrap">
    <div class="header">
      <a href="#" class="logo"><img src="images/logo.png" alt="" /></a>
      <div class="copyright">
        CopyRight © 2019 深圳百秀信息技术股份有限公司<br />All Rights Reserved
      </div>
    </div>

    <div class="login_form_con">
      <div class="login_title"></div>
      <form class="login_form">
        <i class="iconfont icon-user"></i>
        <i class="iconfont icon-key"></i>
        <input type="text" class="input_txt" placeholder="邮箱/手机号" />
        <input type="password" class="input_pass" placeholder="密码" />
        <input type="submit" class="input_sub" value="登 录" />
      </form>
    </div>
  </div>
  <!-- 添加模态框，一定要加到body下面，做为body的直接子元素 -->
  <div class="modal fade" tabindex="-1" role="dialog" id='myModal'>
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">友情提示</h4>
        </div>
        <div class="modal-body">
          <p class="optInfo"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary btnc">确定</button>
        </div>
      </div>
    </div>
  </div>
  <script>
    //入口函数
    $(function () {
      $('.btnc').on('click',function(){
        $('#myModal').modal('hide')
      })
      /* 登录功能思路
      1.给登录按钮注册点击事件
      2.阻止默认跳转事件（表单submit会自动跳转页面）
      3.获取用户名和密码
      4.非空判断
      5.ajax发送请求
      6.处理响应结果   a.成功：跳转管理系统首页    b.失败：提示用户
       */
      //1.给登录按钮注册点击事件
      $('.input_sub').click(function (e) {
        //2.阻止默认跳转事件（表单submit会自动跳转页面）
        e.preventDefault();
        //3.获取用户名和密码
        var username = $('.input_txt').val().trim();//去除前后空格
        var password = $('.input_pass').val().trim();
        //4.非空判断
        if (username == '' || password == '') {
          // alert('用户名与密码不能为空');
          $('#myModal .optInfo').text('用户名与密码不能为空')
          $('#myModal').modal({ keyboard: true })
          return;
        };
        //5.ajax发送请求
        $.ajax({
          url: 'http://localhost:8080/api/v1/admin/user/login',
          type: 'post',
          dataType: 'json',
          data: {
            username,
            password
          },
          success: function (backData) {
            console.log(backData);
            //6.处理响应结果  a.成功：跳转管理系统首页  b.失败：提示用户
            if (backData.code == 200) {
              // 设置模态框主体显示内容
              $('#myModal .optInfo').text(backData.msg)
              // 设置esc也能隐藏模态框
              // $('#myModal').modal({ keyboard: true })
              $('#myModal').modal('show')
              // 模态框隐藏后，跳转到首页
              $('#myModal').on('hidden.bs.modal', function (e) {
                // 在跳转前将token存储到本地
                localStorage.setItem('bn_token',backData.token)
                //跳转首页
                window.location.href = './index.html';
              })

            } else {
              $('#myModal .optInfo').text(backData.msg)
              $('#myModal').modal({ keyboard: true })
            }
          }
        });
      });
    });
  </script>
</body>

</html>